<template>
  <div class="header">
    <div class="advertisement">
      <a href="#">
        <img src="@/assets/img/public/advertisement.png" class="advertisement-img">
      </a>
    </div>
    <div class="nav-link">
      <div class="top-1">
        <div class="city">
          <div class="current-city">
            <img src="@/assets/img/public/position.png">
            <span>深圳市</span>
          </div>
        </div>
        <div class="top-nav">
          <ul class="nav">
            <li class="list" v-for="(item, index) in topList" :key="index"><a href="javascript:void(0)">{{item}}</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="top-search">
      <div class="search-content">
        <div class="logo" @click="goHome()">
          <img src="@/assets/img/public/logo.png" />
        </div>
        <div class="search-bar" style="width: 770px">
          <div class="search">
            <label class="search-label">
              <div><input type="text" placeholder="限时专享"></div>
            </label>
            <button type="button" class="search-btn">搜索</button>
          </div>
          <div class="suggest">
            <dl>
              <dd v-for="(item, index) in suggestList" :key="index">{{item}}
                 </dd>
            </dl>
          </div>
        </div>
        <div class="btn">
          <div v-if="userInfo">{{userInfo.userName}}</div>
          <button @click="goLogin()" class="login" v-else>登录</button>
          <div>
            <img src="@/assets/img/public/cart.png">
          </div>
        </div>
      </div>
    </div>
    <div class="nav-title">
      <div class="nav-bar">
      <dl id="nav">
        <dt @mouseenter="showTypeList">
          <img src="@/assets/img/public/classify.png">所有商品分类
        </dt>
        <div id="nav-content">
          <dd style="background: #0099a8">{{navList[0]}}</dd>
          <a href="javascript:void(0)"><dd>{{navList[1]}}</dd></a>
          <a href="javascript:void(0)"><dd>{{navList[2]}}</dd></a>
          <a href="javascript:void(0)"><dd>{{navList[3]}}</dd></a>
          <a href="javascript:void(0)"><dd>{{navList[4]}}</dd></a>
          <a href="javascript:void(0)"><dd>{{navList[5]}}</dd></a>
          <a href="javascript:void(0)"><dd>{{navList[6]}}</dd></a>
          <a href="javascript:void(0)"><dd>{{navList[7]}}</dd></a>
          <a href="javascript:void(0)"><dd>{{navList[8]}}</dd></a>
          <a href="javascript:void(0)"><dd>{{navList[9]}}</dd></a>
          <a href="javascript:void(0)"><dd>{{navList[10]}}</dd></a>
        </div>
      </dl>
      <dl id="typeList" v-show="isType" @mouseleave="hideTypeList">
        <dd class="type" v-for="(item, index) in pcGoodsCatView" :key="index">
          <span>{{ item.catName }}</span>
          <img src="@/assets/img/public/arrow.png">
        </dd>
      </dl>
    </div>
    </div>
  </div>
</template>

<script>
import {getPcGoodsCat} from "@/api/index.js"
export default {
  async created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    const {result: {pcGoodsCatView}} = await getPcGoodsCat();
    this.pcGoodsCatView = pcGoodsCatView;
    this.$delete(this.pcGoodsCatView,9)
  },
  data() {
    return {
      topList: ["顺电招聘", "我的顺电", "家电医院", "为您服务", "更多精选", "手机顺电", "品牌入驻", "仓库招租"],
      suggestList: ["限时专享", "戴森", "松下冰箱", "扫地机", "手机", "相机特惠", "Apple", "游戏本", "美容仪", "音箱"],
      navList: ["首页", "Apple授权店", "戴森专区", "新品", "样品出清", "每周特惠", "手机专区", "厨电专区", "卡萨帝专区", "摄影专区", "电脑专区"],
      pcGoodsCatView:[],
      isType: false,
      userInfo: ""
    }
  },
  methods: {
    goLogin() {
      if (this.$route.path !== '/login') {
        this.$router.push('/login');
      }
    },
    goHome() {
      if (this.$route.path !== '/home') {
        this.$router.push('/home');
      }
    },
    showTypeList() {
      this.isType = true;
    },
    hideTypeList() {
      this.isType = false;
    }
  }
}
</script>

<style scoped>
  ul {
    margin: 0;
    padding: 0;
  }
  .header {
    width: 100%;
    overflow: initial;
    padding: 0 !important;
    margin: 0 auto !important;
    font-size: 14px;
    color: #000;
    font-family: "Microsoft yahei", Verdana, Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .advertisement {
    width: 100%;
    height: 100px;
    position: relative;
  }
  .advertisement-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .nav-link {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ececec;
    display: flex;
    height: 35px;
  }
  .top-1 {
    width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
  }
  .city {
    height: 35px;
    min-width: 50px;
    position: relative;
    z-index: 999;
  }
  .current-city {
    height: 35px;
    min-width: 30px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-bottom: none;
    border-top: none;
  }
  .current-city > img {
    height: 14px;
    width: 14px;
  }
  .current-city > span {
    margin-left: 2px;
  }
  .top-nav {
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    width: 900px;
    z-index: 999;
  }
  .top-nav > .nav {
    float: right;
    height: 40px;
  }
  .top-nav > .nav >.list {
    cursor: pointer;
    float: left;
    width: 90px;
    height: 35px;
    text-align: center;
    z-index: 999;
  }
  .top-nav > .nav >.list > a {
    color: #666;
  }
  .top-nav > .nav >.list:first-child > a {
    color: #ff0000;
  }
  .top-search {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    background-color: #fff;
  }
  .top-search > .search-content {
    width: 1200px;
    height: 80px;
    display: flex;
    margin: 0 auto -20px;
  }
  .top-search > .search-content > .logo {
    width: 195px;
    height: 80px;
    display: flex;
  }
  .top-search > .search-content > .logo > img {
    width: 144px;
    height: 48px;
    margin-top: 4px;
    align-items: left;
  }
  .top-search > .search-content > .btn {
    display: flex;
    height: 40px;
    justify-content: flex-end;
    width: 230px;
  }
  .top-search > .search-content > .btn >.login {
    background: #fff;
    border: 1px solid #ccc;
    color: #595454;
    font-size: 16px;
    height: 40px;
    margin: 0 15px;
    width: 60px;
    cursor: pointer;
    text-align: center;
  }
  .search-bar > .search {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .search-label {
    display: block;
    overflow: hidden;
    position: relative;
    width: 680px;
  }
  .search-label > div {
    width: 100%;
    margin-left: 10px;
    display: flex;
    vertical-align: top;
  }
  .search-label  input {
    width: 100%;
    background-color: #fff;
    background-image: none;
    border: 1px solid #0099a8;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
  .search-btn {
    background: #0099a8;
    border: none;
    height: 40px;
    margin-left: -5px;
    width: 88px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    outline: 0;
    padding: 12px 20px;
    text-align: center;
    transition: .1s;
    white-space: nowrap;
  }
  .suggest {
    height: 20px;
    margin: 8px 0 0 10px;
    width: 770px;
    overflow: hidden;
  }
  .suggest > dl {
    height: 100%;
    display: flex;
    margin: 0;
  }
  .suggest dd {
    margin: 0;
    padding: 0;
    padding-right: 10px;
    cursor: pointer;
  }
  .nav-title {
    width: 100%;
    background: #33353d;
  }
  .nav-bar {
    width: 1200px;
    margin: 0 auto;
    background: #33353d;
    display: flex;
    height: 40px;
    position: relative;
  }
  .nav-bar>#nav {
    color: #fff;
    display: flex;
    justify-content: flex-start;
    line-height: 40px;
    width: 1200px;
    margin: 0 auto;
  }
  .nav-bar>#nav>dt {
    flex-shrink: 0;
    text-align: center;
    width: 200px;
    white-space: nowrap;
  }
  .nav-bar>#nav>dt>img {
    height: 12px;
    margin-bottom: -1px;
    margin-right: 13px;
    width: 14px;
  }
  #nav > #nav-content {
    color: #fff;
    display: flex;
    flex: 1;
    justify-content: flex-start !important;
    left: 0;
    line-height: 40px;
    overflow-x: hidden;
    position: relative;
  }
  #nav > #nav-content dd {
    color: #fff;
    flex-shrink: 0;
    padding: 0 16px;
    white-space: nowrap;
    margin: 0;
  }
  #nav > #nav-content > a:hover {
    cursor: pointer;
    background: #0099a8;
  }
  #typeList {
    background: #fff;
    height: 450px;
    left: 0;
    opacity: .9;
    position: absolute;
    top: 40px;
    width: 200px;
    z-index: 999;
  }
  #typeList > .type {
    color: #333;
    font-size: 16px;
    height: 45px;
    line-height: 45px;
    width: 200px;
    margin: 0;
  }
  #typeList > .type:first-of-type {
    margin-top: 20px;
  }
  #typeList > .type > span {
    display: inline-block;
    margin: 0;
    margin-left: 20px;
    font-size: 16px;
    width: 150px;
    text-align: start;
    float: left;
  }
  #typeList > .type > img {
    margin: 0;
    margin-bottom: 2px;
    width: 9px;
  }
  #typeList > .type:hover {
    background: #ededed;
  }
  #typeList > .type:hover > span {
    color: #0099a8;
  }
</style>